<template>
  <a-modal @cancel="resetModalData()" :footer="null" v-model:visible="visible" title="新增部门">
    <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
      <a-form-item
          label="部门名称"
          name="title"
          :rules="titleRule"
      >
        <a-input v-model:value="formState.title"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-space :size="20">
          <a-button type="normal" @click="resetModalData">关闭</a-button>
          <a-button type="primary" html-type="submit">添加</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {inject, reactive} from "vue";
import {titleRule} from './config'
import {FormState} from "@/views/Home/AddForm/types";
import useDepartStore from "@/store/departModule";
import {message} from "ant-design-vue";


const visible = inject("visible")
const departStore = useDepartStore()
const formState = reactive<FormState>({
  title: '',
});
const handleCloseAddModal = inject("handleCloseAddModal") as Function
const resetModalData = () => {
  formState.title = ""
  handleCloseAddModal()
}

const onFinish = async (values: any) => {
  const sendObj = {
    title: values.title
  }
  const flag = await departStore.addDepartAction(sendObj)
  if (flag) {
    resetModalData()
  }
};

const onFinishFailed = (errorInfo: any) => {
  message.error(errorInfo.errorFields[0].errors[0])
};
</script>

<style lang="less" scoped></style>
